<template>
	<tm-app>
		<tm-sheet :height="320" :margin="[0]" :padding="[0]" class="building">
			<tm-sheet :margin="[0]" _style="background: rgba(0, 0, 0, 0);" :padding="[0]" :height="300"
				_class="flex flex-col flex-center">

				<tm-text color="white" :font-size="44" _class="text-weight-b" :label="diff<0?'订单已超时':'等待付款'"></tm-text>
				<tm-sheet :margin="[0]" :padding="[0]" _class="flex flex-row flex-center"
					_style="background: rgba(0, 0, 0, 0.0);">
					<tm-text :font-size="24" color="grey" label="付款倒计时"></tm-text>

					<tm-sheet :margin="[0]" :padidng="[0]" _style="background: rgba(0, 0, 0, 0);">
						<tm-text :font-size="24" color="#2c8957" :label="timeStr"></tm-text>
					</tm-sheet>
				</tm-sheet>
			</tm-sheet>
		</tm-sheet>
		<tm-sheet :margin="[0,-30,0,0]" color="white" :padding="[30]" :height="140" :round="[6,6,0,0]"
			_class="flex flex-row">
			<tm-image :height="140" :width="140" :round="4" :src="orderInfo.cover"></tm-image>
			<tm-sheet _class="flex flex-row flex-between" :width="620" :margin="[0]" :padding="[0]">
				<tm-sheet :margin="[20,0,0,0]" :padding="[0]" _class="flex flex-col flex-col-center-start">
					<tm-sheet :margin="[0]" :padding="[0]" :height="40" _class="flex flex-row flex-row-center-start">
						<tm-text :font-size="28" :label="orderInfo.nickname"></tm-text>
					</tm-sheet>
				</tm-sheet>
				<tm-icon :font-size="20" name="tmicon-angle-right"></tm-icon>
			</tm-sheet>
		</tm-sheet>
		<tm-sheet _class="flex flex-row flex-between" :width="750" :margin="[0,20,0,0]" :padding="[30]">
			<tm-sheet :margin="[0]" :padding="[0]" _class="flex flex-col flex-col-center-start">
				<tm-sheet :margin="[0]" :padding="[0]" _class="flex flex-row flex-row-center-start">
					<tm-text :font-size="28" label="订单详情"></tm-text>
				</tm-sheet>
				<tm-sheet :margin="[0]" :padding="[0]" :width="690" _class="border-b-1">
					<tm-sheet :margin="[0]" :padding="[0,30]" _class="flex flex-row flex-row-center-between">
						<tm-text :font-size="24" color="rgba(0, 0, 0, 0.6)" label="订单金额:"></tm-text>
						<tm-text :font-size="35" _class="text-weight-b" :label="'￥'+orderInfo.unitPrice"></tm-text>
					</tm-sheet>
				</tm-sheet>

				<tm-sheet :margin="[0]" :padding="[0,30,0,0]" :width="690"
					_class="flex flex-row flex-row-center-between">
					<tm-text :font-size="24" color="rgba(0, 0, 0, 0.6)" label="订单ID号:"></tm-text>
					<tm-text :font-size="20" _class="text-weight-b" :label="orderInfo.id"></tm-text>
				</tm-sheet>

			</tm-sheet>


		</tm-sheet>
		<tm-sheet :margin="[0,20,0,0]" :padding="[30,30,30,0]" :width="750">
			<tm-sheet :margin="[0]" :padding="[0]" :height="45">
				<tm-text :font-size="28" label="说明"></tm-text>
			</tm-sheet>
			<tm-sheet :margin="[0,20]" :padding="[0]">
				<tm-text :font-size="28" label="1.超时未支付订单，系统会自动取消。"></tm-text>
			</tm-sheet>

			<tm-sheet :margin="[0,20]" :padding="[0]" :width="690">
				<tm-text :font-size="28" label="2.同一账号一段时间内累计取消3次订单，将会被限购一段时间。"></tm-text>
			</tm-sheet>
		</tm-sheet>
		<tm-sheet :margin="[0,0,0,0]" :padding="[30,15,30,45]" :height="90" :width="690"
			style="position: fixed;bottom:0;" _class="flex flex-row flex-row-top-center">

			<tm-button color="white" @click="cancel" label="取消订单"></tm-button>
			<tm-button :margin="[20,16,0,16]" @click="pay" :linear-color="['#1a1a1a', '#666']" :width="440"
				linear="left" :shadow="-1" :label="diff>0?'立即支付':'重新购买'"></tm-button>
		</tm-sheet>
	</tm-app>
</template>

<script>
	import dayjs from '@/tmui/tool/dayjs/esm';
	export default {
		data() {
			return {
				orderInfo: {},
				id: "",
				diff: 0,
				timeStr: "",
			}
		},
		onLoad(option) {
			
			this.buyDcNft(option.id);
			this.showTimer();

		},
		methods: {
			buyDcNft(id) {
				uni.request({
					url: `/app/order/buyDcOrder.do?id=${id}`,
					method: 'GET',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						
						this.orderInfo = res.data.data;
					},
					fail: function(err) {
						console.error('请求失败', err);
					}
				});
			},
			cancel() {
				uni.navigateTo({
					url: `/pages/getnft/getnft?id=${this.orderInfo.nftId}`
				})
			},
			pay() {
				if (this.diff < 0) {
					uni.switchTab({
						url: '/pages/index/index'
					});
				} else {
					uni.request({
						url: `/app/order/${this.orderInfo.id}/paymentNft.do`,
						method: 'GET',
						header: {
							'content-type': 'application/json'
						},
						success: (res) => {
							uni.switchTab({
								url: '/pages/index/index'
							});
						},
						fail: function(err) {
							console.error('请求失败', err);
						}
					});
				}

			},
			showTimer() {
				//结束时间 = 下单时间 + 5分钟

				let endDateTime = dayjs(this.orderInfo.createTime)
				let endTime = endDateTime + (5 * 60 * 1000);

				//循环执行，定时器
				let timer = setInterval(() => {
					if (this.diff < 0) {
						clearInterval(timer);
						//超时未支付
					}
					//当前时间
					let now = new Date();
					let time = now.getTime();
					this.diff = Number((endTime - time) / 1000)
					this.timeStr = this.formatSeconds((endTime - time) / 1000);
				}, 1000);
			},
			formatSeconds(value) {
				let secondTime = parseInt(value);
				let minuteTime = 0;
				let hourTime = 0;
				if (secondTime >= 60) {
					minuteTime = parseInt(secondTime / 60);
					secondTime = parseInt(secondTime % 60);
					if (minuteTime >= 60) {
						hourTime = parseInt(minuteTime / 60);
						minuteTime = parseInt(minuteTime % 60);
					}
				}
				// 补0
				hourTime = hourTime < 10 ? "0" + hourTime : hourTime;
				minuteTime = minuteTime < 10 ? "0" + minuteTime : minuteTime;
				secondTime = secondTime < 10 ? "0" + secondTime : secondTime;
				let res = hourTime + ":" + minuteTime + ":" + secondTime;
				return res;
			}
		},

	}
</script>

<style>
	.building {
		background: url("../../static/image/tabbar/order.png") center;
		width: 100%;
		background-size: 100%;

	}
</style>